<script setup lang="ts">
const props = defineProps<{
  list: Array<{
    type: string;
    time: string;
    amount: number;
    currency: string;
    icon: string;
  }>;
  selectedAct?: string;
}>()

const { t } = useI18n()
</script>

<template>
  <div class="bg-[#393c41] rounded-xl overflow-hidden w-full">
    <!-- 表格 -->
    <div class="trade-table">
      <div class="table-header">
        <span class="col-type">{{ selectedAct === '2' ? t('trade_type') : t('status') }}</span>
        <span class="col-bet">{{ t('trade_time') }}</span>
        <span class="col-win">{{ t('trade_amount') }}</span>
      </div>
      <div class="table-row" v-for="(row, idx) in props.list" :key="idx" v-if="props.list.length > 0">
        <span class="col-type">{{ row.type || '-' }}</span>
        <span class="col-bet">{{ row.time || '-' }}</span>
        <span class="col-win flex items-center justify-end font-bold" :class="Number(row.amount) > 0 ? 'win' : 'lose'">
          <span>{{ Number(row.amount) > 0 ? '+' : '' }}{{ row.currency }}{{ Math.abs(Number(row.amount)).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) }}</span>
          <AppCurrencyIcon
            :show-name="false"
            :currency-type="row.currency as any"
            icon-align="left"
            class="ml-2 w-4 h-4 rounded-full"
          />
        </span>
      </div>
      <AppNoData v-else/>
    </div>
  </div>
</template>

<style scoped>
.trade-table {
  background: #292D2E;
  padding: 0;
}
.table-header, .table-row {
    background: #323738;
  display: flex;
  align-items: center;  
  justify-content: space-between;
  padding: 0 20px;
  height: 48px;
  font-size: 14px;
}

.table-row:nth-child(even) {
    background: linear-gradient(0deg, #3A4142 0%, #3A4142 100%), #323738;
}
.col-type {
  flex: 1.2;
  justify-content: flex-start !important;
}
.col-count, .col-bet {
    flex: 2;
  justify-content: center !important;
}
.col-win {
    flex: 2;
  justify-content: flex-end !important;
}
.table-header span, .table-row span {
  display: flex;
  align-items: center;
}
.win {
  color: #24EE89;
  font-weight: bold;
}
.lose {
  color: #B3BEC1;
}
.usdt-icon {
  color: #24EE89;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
